<template>
	<view class="my-swiper" :style="{ height: height + 'rpx' }">
		<up-swiper
			v-if="images.length"
			:list="images"
			:height="height + 'rpx'"
			@change="swiperChange"
			:autoplay="true"
			indicatorStyle="left:24rpx; bottom: 56rpx"
		>
			<template #indicator>
				<view class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ images.length }}</text>
				</view>
			</template>
		</up-swiper>
	</view>
</template>
<script>
export default {
	name: "zjy-banners",
	props: {
		images: {
			type: Array,
			default: () => [],
		},
		height: {
			type: Number,
			default: 700,
		},
	},
	data() {
		return {
			currentNum: 0,
		}
	},
	methods: {
		swiperChange(e) {
			this.currentNum = e.current
		},
	},
}
</script>
<style scoped lang="scss">
.my-swiper {
	position: relative;
	.indicator-num {
		padding: 6rpx 12rpx;
		background: $c-black-_5;
		border-radius: 24px;
		display: flex;

		&__text {
			color: $c-white;
			font-size: 20rpx;
		}
	}
}
</style>
